<template>
  <div class="searchBox" id="searchBox">
    <div class="searchForm" id="searchForm" :class="{'open': isOpenSearch}">
      <slot></slot>
    </div>
    <div class="searchBtnBox">
      <el-button type="primary" icon="el-icon-search" :size="size" @click="search">查询</el-button>
      <el-button @click="reset" icon="el-icon-refresh" :size="size">重置</el-button>
      <el-button type="text" :size="size" v-show="isShowOpenBtn" @click="isOpenSearch = !isOpenSearch">{{isOpenSearch? '收起': '展开'}}</el-button>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from "vuex"
  export default {
    name: 'yh-searchBox',
    data () {
      return {
        isOpenSearch: false,
        isShowOpenBtn: true
      }
    },
    computed: {
      ...mapGetters(['size'])
    },
    mounted () {
      this.initShowOpenBtn()
    },
    methods: {
      initShowOpenBtn () {
        this.isShowOpenBtn = document.getElementById('searchForm').children[0].clientHeight > 60
      },
      search () {
        this.$emit('search')
      },
      reset () {
        this.$emit('reset')
      },
    }
  }
</script>

<style>
  .searchBox {
    margin-bottom: 10px;
  }
  .searchBtnBox {
    text-align: right;
  }
  .searchForm{
    max-height: 45px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.3s;
  }
  .searchForm.open{
    max-height: 600px;
  }
  .searchBox .el-form-item__content{
    padding: 0;
  }
  .searchBox .el-button--text:focus, .el-button--text:hover {
    color: #c356c3;
  }
  .searchBox .el-form-item {
    margin-bottom: 13px;
  }
</style>
